<template>
  <view class="template-hot tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha :customBack="true">
      <!-- 	<view slot="back" class='tn-custom-nav-bar__back'>
		<text class='icon tn-icon-left' @click="goBack"></text>
		<text class='icon tn-icon-more-circle' @click="listshow=true"></text>
		</view>		 -->
      <view class="custom-nav-content">
        <view class="search-content"> 消息 </view>
      </view>
    </tn-nav-bar>

    <view :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
      <tn-action-sheet
        v-model="listshow"
        :list="listanniu"
        @click="heimingdan"
      ></tn-action-sheet>
      <mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback">
        <view class="top-cards">
          <view
            class="tn-padding-sm tn-margin-xs tn-radius card-item card-item-1"
            @click="qiehuan(1, '收到的赞')"
          >
            <view
              style="position: relative"
              class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center"
            >
              <image
                class="card-item-image"
                src="../../../static/images/messageIcon1.png"
                mode=""
              ></image>
              <view class="tn-color-black tn-text-center">
                <text class="tn-text-ellipsis">点赞</text>
              </view>
              <tn-badge
                v-if="msglist.zan_num"
                backgroundColor="#FA5151"
                style="border: 1px solid #fff"
                top="0px"
                right="0px"
                fontColor="#FFFFFF"
                :absolute="true"
              >
                <text>{{ msglist.zan_num }}</text>
              </tn-badge>
            </view>
          </view>
          <view
            class="tn-padding-sm tn-margin-xs tn-radius card-item card-item-2"
            @click="qiehuan(0, '评论我的')"
          >
            <view
              style="position: relative"
              class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center"
            >
              <image
                class="card-item-image"
                src="../../../static/images/messageIcon2.png"
                mode=""
              ></image>
              <view class="tn-color-black tn-text-center">
                <text class="tn-text-ellipsis">评论</text>
              </view>
              <tn-badge
                v-if="msglist.ping_num"
                backgroundColor="#FA5151"
                style="border: 1px solid #fff"
                top="0px"
                right="0px"
                fontColor="#FFFFFF"
                :absolute="true"
              >
                <text>{{ msglist.ping_num }}</text>
              </tn-badge>
            </view>
          </view>
          <view
            class="tn-padding-sm tn-margin-xs tn-radius card-item card-item-3"
            @click="qiehuan(3, '关注我的')"
          >
            <view
              style="position: relative"
              class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center"
            >
              <image
                class="card-item-image"
                src="../../../static/images/messageIcon3.png"
                mode=""
              ></image>
              <view class="tn-color-black tn-text-center">
                <text class="tn-text-ellipsis">收藏</text>
              </view>
              <tn-badge
                v-if="msglist.guanzhu_num"
                backgroundColor="#FA5151"
                style="border: 1px solid #fff"
                top="0px"
                right="0px"
                fontColor="#FFFFFF"
                :absolute="true"
              >
                <text>{{ msglist.guanzhu_num }}</text>
              </tn-badge>
            </view>
          </view>
          <view
            class="tn-padding-sm tn-margin-xs tn-radius card-item card-item-4"
            @click="qiehuan(2, '系统通知')"
          >
            <view
              style="position: relative"
              class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center"
            >
              <image
                class="card-item-image"
                src="../../../static/images/messageIcon4.png"
                mode=""
              ></image>
              <!-- <view
								class=" icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-purple--light tn-color-purple">
								<view class="tn-icon-identity-fill tn-three"></view>
							</view> -->
              <view class="tn-color-black tn-text-center">
                <text class="tn-text-ellipsis">系统消息</text>
              </view>
              <tn-badge
                v-if="msglist.xitong_num"
                backgroundColor="#FA5151"
                top="0px"
                right="0px"
                fontColor="#FFFFFF"
                :absolute="true"
                style="border: 1px solid #fff"
              >
                <text>{{ msglist.xitong_num }}</text>
              </tn-badge>
            </view>
          </view>
        </view>
        <!-- v-if="configInfo.frinedhuhuan==1&&configInfo.xcx_sh==1" -->
        <block>
          <view class="tn-flex tn-flex-row-between tn-margin-sm">
            <view class="justify-content-item tn-text-bold">
              <text class="">呼唤热聊</text>
            </view>
            <view
              class="justify-content-item"
              @click="
                navigateToFn({
                  url: '/friendMixinPages/huhuan',
                  checkLogin: false,
                })
              "
            >
              <text class="all-text">更多</text>
              <text class="tn-icon-right all-text"></text>
            </view>
          </view>

          <tn-scroll-list
            :indicatorWidth="114"
            :indicatorBarWidth="36"
            indicatorColor="rgba(36, 212, 209, 0.4)"
            indicatorActiveColor="#24D4D1"
          >
            <!-- 方式12 start-->
            <view class="tn-flex">
              <view
                class="hold-message-item hold-message-item-1"
                @click="huhuan()"
              >
                <view class="hold-message-item-img">
                  <image
                    class="hold-message-image"
                    src="../../../static/images/holdMessageIcon1.png"
                    mode=""
                  ></image>
                </view>
                <view class="tn-text-center">
                  <text class="tn-text-ellipsis">我要呼唤</text>
                </view>
              </view>
            </view>

            <view
              class="hold-message-item"
              v-for="(item, indexsdf) in userlist"
              :key="indexsdf"
            >
              <view
                class="hold-message-item-top"
                @click="
                  navigateToFn({
                    url: '/circleMixinPages/blogger_other?id=' + item.id,
                    checkLogin: false,
                  })
                "
              >
                <view class="hold-message-item-top">
                  <!-- <view
										class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur ">
										<tn-avatar class="" :src="item.avatar" size="lg" shape="circle">
										</tn-avatar>
									</view> -->
                  <view class="hold-message-item-img">
                    <view class="hold-message-text">
                      <text>热聊中</text>
                    </view>
                    <image
                      class="hold-message-avatar"
                      :src="item.avatar"
                      mode="aspectFill"
                    ></image>
                  </view>
                  <view class="tn-text-center">
                    <text class="tn-text-ellipsis">{{ item.nickname }}</text>
                  </view>
                </view>
              </view>
            </view>
            <!-- 方式12 end-->
          </tn-scroll-list>
        </block>

        <view class="message-lists">
          <view
            class="message-gf"
            @click="qiehuan(2, '系统通知')"
            v-if="tokenlogin"
          >
            <view class="message-gf-left"> </view>
            <view class="message-gf-center">
              <view class="message-gf-center-1">
                <text class="message-gf-center-text">官方小秘书</text>
                <view class="message-gf-center-text-2">
                  <text>官方</text>
                </view>
              </view>
              <text class="message-gf-center-text-3">
                你的附近有人给你打了个招呼，快来看…
              </text>
            </view>
            <view class="message-gf-right">
              <text class="message-gf-right-1">11:22</text>
              <!-- <view class="message-gf-right-2">
								
							</view> -->
              <view class="message-gf-right-2" v-if="msglist.xitong_num > 0">
                <tn-tag
                  backgroundColor="#FA5151"
                  fontColor="tn-color-white"
                  shape="circle"
                  width="auto"
                  size="sm"
                  >{{ msglist.xitong_num }}</tn-tag
                >
              </view>
            </view>
          </view>

          <!-- 其他聊天 -->
          <view class="message-gf" v-for="(item, index) in 2" :key="index">
            <view class="message-gf-left">
              <view class="message-gf-left-flot-1" v-if="index == 0">
                <image
                  class="message-gf-left-flot-img"
                  cl
                  src="../../../static/images/holdMessageIcon3.png"
                  mode=""
                ></image>
              </view>
              <view class="message-gf-left-flot-2" v-else>
                <image
                  class="message-gf-left-flot-img"
                  src="../../../static/images/holdMessageIcon4.png"
                  mode=""
                ></image>
              </view>
            </view>
            <view class="message-gf-center">
              <view class="message-gf-center-1">
                <text class="message-gf-center-text">甜到忧伤～</text>
                <view
                  class="message-gf-center-text-2"
                  :class="{
                    'message-gf-center-text-2-nv': index === 0,
                    'message-gf-center-text-2-nan': index !== 0,
                  }"
                >
                  <text>LV.1</text>
                </view>
              </view>

              <text class="message-gf-center-text-3">
                我好像在哪里见过你，原来是在梦里见过你
              </text>
            </view>
            <view class="message-gf-right">
              <text class="message-gf-right-1">11:22</text>
              <!-- <view class="message-gf-right-2">
								
							</view> -->
              <view class="message-gf-right-2" v-if="msglist.xitong_num > 0">
                <tn-tag
                  backgroundColor="#FA5151"
                  fontColor="tn-color-white"
                  shape="circle"
                  width="auto"
                  size="sm"
                  >{{ msglist.xitong_num }}</tn-tag
                >
              </view>
            </view>
          </view>
          <view class="btm-solid">
            <view class="btm-solid-1"> </view>
            <text class="btm-solid-2"> END </text>
            <view class="btm-solid-3"> </view>
          </view>
          <!-- <view class="message tn-padding-sm" >
						<view class="message__left">
							<tn-avatar size="lg" shape="circle" :src="configInfo.site_logo">
							</tn-avatar>
						</view>
						<view class="message__middle">
							<view class="message__name">官方小助手
							</view>
						</view>
						<view class="message__right" style="width: 14%;">
							<view class="message__time">查看</view>
							<view class="message__tips" v-if="msglist.xitong_num>0">
								<tn-tag backgroundColor="tn-bg-red" fontColor="tn-color-white" shape="circle"
									width="auto" size="sm">{{msglist.xitong_num}}</tn-tag>
							</view>
						</view>
					</view> -->

          <!--<view class="empty__item" v-if="content.length==0&&tokenlogin" style="margin-top: 100px;"@click="guangchang()">
						<tn-empty icon="/static/images/no.png" text="你还没有任何消息,">
							<tn-button backgroundColor="#ffff00" fontColor="#000000" size="xxl">去找人聊聊呀
							</tn-button>
						</tn-empty>
					</view>



					<view class="empty__item" v-if="!tokenlogin" style="margin-top: 100px;height:100%"
						@click="denglu()">
						<tn-empty icon="/static/images/no.png" text="登录查看你的消息哦">
							<tn-button backgroundColor="#ffff00" fontColor="#000000" size="xxl">戳这里登录
							</tn-button>
						</tn-empty>
					</view>-->

          <!-- <view class="message tn-padding-sm " v-for="(item,index) in content" :key="index"
						@longtap="onLongPress(item,index)">

						<view class="message__left" @click="jinru(item,index)">
							<tn-avatar :badge="item.is_manage_normal" badgeText="管" :badgePosition="[8,20]"
								badgeBgColor="#00aa00" size="lg" shape="circle" :src="item.head_url">
							</tn-avatar>
						</view>
						<view class="message__middle" @click="jinru(item,index)">
							<view class="message__name">{{item.username}}
								<text class="tn-icon-sex  tn-color-gray" v-if="item.sex==0"></text>
								<text class="tn-icon-sex-female tn-color-purplered" v-if="item.sex==2"></text>
								<text class="tn-icon-sex-male  tn-color-blue" v-if="item.sex==1"></text>
								<text class="dk-lv tn-main-gradient-indigo--light"
									v-if="item.vip==0&&configInfo.is_lv">LV {{item.lv}}</text>
								<text class="dk-vip tn-main-gradient-orangeyellow" v-if="item.vip==1"><text
										class="tn-icon-vip tn-color-black"
										style="font-size: 14px;margin-left: -5px;"></text>VIP{{item.vip_lv}}</text>
								
							</view>
							<view class="message__content tn-text-ellipsis" v-if="item.type=='text'">
								{{item.content}}
							</view>
							<view class="message__content tn-text-ellipsis" v-if="item.type=='music'">语音</view>
							<view class="message__content tn-text-ellipsis" v-if="item.type=='image'">图片</view>
							<view class="message__content tn-text-ellipsis" v-if="item.type=='liwuuser'">礼物</view>

						</view>
						<view class="message__right" style="width: 14%;">
							<view class="message__time">{{$common.timeToDate(item.time)}}</view>
							<view class="message__tips" v-if="item.unread>0">
								<tn-tag backgroundColor="tn-bg-red" fontColor="tn-color-white" shape="circle"
									width="auto" size="sm">{{item.unread}}</tn-tag>
							</view>
						</view>
					</view> -->
        </view>

        <!-- 登录框组件 -->
        <login-fn
          :is-show-login="loginBoxFlag"
          @loginSuccessCallback="refreshFn"
          @close="closeGlobalLoginFn"
        >
        </login-fn>
      </mescroll-body>
    </view>
    <view class="tn-tabbar-height" style="height: 50px"></view>

    <tn-popup
      v-model="daojushow"
      width="80%"
      height="40%"
      mode="bottom"
      :borderRadius="30"
      :closeBtn="false"
      :maskCloseable="true"
    >
      <scroll-view class="" scroll-y scroll-with-animation style="height: 100%">
        <view
          class="tn-flex tn-flex-row-center tn-margin-top-sm"
          v-if="daojulist.length == 0"
          @click="
            navigateToFn({ url: '/mineMixinPages/daoju', checkLogin: false })
          "
        >
          <view class="">
            <tn-empty icon="/static/images/no.png" text="你没有任何道具">
              <tn-button
                backgroundColor="#aa00ff"
                fontColor="#FFFFFF"
                size="xxl"
                >去道具商城
              </tn-button>
            </tn-empty>
          </view>
        </view>

        <view
          class="tn-flex tn-flex-wrap tn-margin-left-sm tn-margin-bottom-sm tn-margin-right-sm tn-margin-top-xs"
        >
          <block v-for="(item, index) in daojulist" :key="index">
            <view class="" style="width: 33%; position: relative">
              <view
                class="tn-blogger-content__wrap"
                style="background-color: rgba(255, 255, 255, 0.6)"
              >
                <view
                  class="tn-flex tn-flex-row-center tn-padding-top tn-text-bold"
                >
                  {{ item.gift_name }}
                </view>
                <view class="tn-flex tn-flex-row-center">
                  <image
                    :src="item.image"
                    style="width: 60%"
                    mode="widthFix"
                  ></image>
                </view>
                <view
                  class="tn-flex tn-flex-row-center tn-margin-top-sm tn-padding-bottom-sm"
                >
                  <tn-button
                    shape="round"
                    backgroundColor="#FFF00D"
                    fontColor="#080808"
                    @click="daojuchoce(item, index)"
                  >
                    使用
                  </tn-button>
                </view>
              </view>
            </view>
          </block>
        </view>
      </scroll-view>
    </tn-popup>
  </view>
</template>


<script>
import template_page_mixin from "@/libs/mixin/template_page_mixin.js";
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import Grade from "@/components/grade/index.vue";
export default {
  name: "TemplateGroup",
  mixins: [template_page_mixin, MescrollMixin],
  components: {
    MescrollBody,
  },
  data() {
    return {
      msglist: [],
      adminnum: 0,
      listanniu: [
        {
          text: "我的小黑屋",
        },
        {
          text: "我的好友",
        },
      ],
      listshow: false,
      daojushow: false,
      daojutitle: "",
      daojuid: 0,
      daojulist: [],
      options1: [
        {
          text: "拉黑",
          style: {
            backgroundColor: "#000000",
          },
        },
        {
          text: "删除",
          style: {
            backgroundColor: "#E83A30",
          },
        },
      ],
      loginBoxFlag: false, // 登录框显示隐藏状态
      show_fabu: false,
      cardCur: 0,
      content: [],
      userlist: [],
      tokenlogin: "",
    };
  },

  onTabItemTap(e) {
    if (e.index == 2) {
      setTimeout(() => {
        this.msgconut();
        this.mescroll.resetUpScroll();
      }, 600);
    }
  },

  mounted() {
    let that = this;
    this.tokenlogin = uni.getStorageSync("token");

    uni.$off("setLoginBoxFlag_preferred");
    uni.$on("setLoginBoxFlag_preferred", (loginBoxFlag) => {
      that.loginBoxFlag = loginBoxFlag;
    });

    uni.$on("loginok", (data) => {
      that.tokenlogin = uni.getStorageSync("token");
      that.mescroll.resetUpScroll();
    });

    this.mescroll.optDown.use = false;

    uni.$on("indexpreferred", (data) => {
      if (!uni.getStorageSync("token")) {
        that.loginBoxFlag = true;
        return false;
      } else {
        //that.show_fabu = true
      }
    });

    that.content = uni.getStorageSync("chatlist");

    // 注册接受消息监听
    uni.$on("listMessage", (message) => {
      if (
        message.type == "text" ||
        message.type == "liwuuser" ||
        message.type == "mp3" ||
        message.type == "image"
      ) {
        setTimeout(() => {
          that.mescroll.resetUpScroll();
        }, 2000);
      }
    });

    uni.$on("fasonglist", (message) => {
      console.log("刷新聊天列表");
      that.mescroll.resetUpScroll();
    });

    uni.$on("lahie", (index) => {
      if (index > -1) {
        this.content.splice(index, 1);
      }
    });

    this.setPermissions();
    this.huhuanlist();
    this.msgconut();
  },

  methods: {
    heimingdan(index) {
      if (index == 0) {
        this.navigateToFn({
          url: "/mineMixinPages/hei_user?id=" + index + "&title=黑名单",
          checkLogin: true,
        });
      }
      if (index == 1) {
        this.navigateToFn({
          url: "/mineMixinPages/hei_user?id=" + index + "&title=我的好友",
          checkLogin: true,
        });
      }
    },

    async huhuanlist() {
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/four/huhuan_list",
        data: {
          page: 1,
        },
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          that.userlist = result.data.data.data;
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    async huhuan() {
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/gift/my_daoju_huhuan",
        data: {
          tabsIndex: 0,
        },
      });
      if (result.data.code == 200) {
        this.daojushow = true;
        this.daojulist = result.data.data;
      }
    },
    async daojuchoce(item) {
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/gift/my_daoju_huhuan_pass",
        data: {
          id: item.id,
        },
      });
      if (result.data.code == 200) {
        this.huhuanlist();
        this.daojushow = false;
        this.msg("呼唤成功");
      }
    },

    //点击单行
    itemClick(data) {
      console.log("点击", data);
    },
    //拉黑
    del(data) {
      this.onSwiperItemClick(data, 2);
    },
    //删除
    edit(data) {
      this.onSwiperItemClick(data, 1);
    },

    guangchang() {
      uni.switchTab({
        url: "/pages/tabbar/circle/circle",
      });
    },

    denglu() {
      this.loginBoxFlag = true;
    },

    refreshFn() {
      console.log("登录返回");
      this.mescroll.resetUpScroll();
    },

    qiehuan(type, title) {
      let timenow = Math.round(new Date().getTime() / 1000).toString();
      if (type == 0) {
        uni.setStorageSync("pingtime", timenow);
        this.msglist.ping_num = 0;
      }
      if (type == 1) {
        uni.setStorageSync("zantime", timenow);
        this.msglist.zan_num = 0;
      }
      if (type == 2) {
        uni.setStorageSync("xitongtime", timenow);
        this.msglist.xitong_num = 0;
      }
      if (type == 3) {
        uni.setStorageSync("flowgtime", timenow);
        this.msglist.guanzhu_num = 0;
      }
      this.navigateToFn({
        url: "/mineMixinPages/my_msg?type=" + type + "&title=" + title,
        checkLogin: true,
      });
    },
    zhushou(type, title) {
      this.navigateToFn({
        url: "/mineMixinPages/zhushou?type=" + type + "&title=" + title,
        checkLogin: true,
      });
    },

    onLongPress(e, index) {
      let that = this;
      uni.showModal({
        // 弹框询问是否进行下一步事件
        title: "提示",
        content: "是否从聊天列表删除",
        success: function (res) {
          if (res.confirm) {
            that.onSwiperItemClick(e, 1, index);
          } else if (res.cancel) {
            console.log("用户点击取消");
            return;
          }
        },
      });
    },
    async onSwiperItemClick(e, type, index) {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/chat/chat/delChatLog",
        data: {
          id: e.id,
          status: type,
        },
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          this.content.splice(index, 1);
        }
      }
    },

    jinru(item, index) {
      console.log(item);
      uni.$emit("jianshacount", item.unread);
      this.content[index].unread = 0;
      this.navigateToFn({
        url:
          "/mineMixinPages/chat/talk?toid=" +
          item.toid +
          "&toname=" +
          item.username +
          "&index=" +
          index,
        checkLogin: true,
      });
    },
    async msgconut() {
      let pingtime = uni.getStorageSync("pingtime");
      let xitongtime = uni.getStorageSync("xitongtime");
      let zantime = uni.getStorageSync("zantime");
      let flowgtime = uni.getStorageSync("flowgtime");

      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/four/msgconut",
        data: {
          pingtime: pingtime,
          xitongtime: xitongtime,
          zantime: zantime,
          flowgtime: flowgtime,
        },
      });
      if (result.data.code == 200) {
        this.msglist = result.data.data;
      }
    },

    /// 列表调用
    downCallback(mescroll) {
      mescroll.endSuccess();
      mescroll.resetUpScroll();
    },
    async upCallback(mescroll) {
      let that = this;
      if (!uni.getStorageSync("token")) {
        mescroll.endErr();
        return;
      }
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/api/chat/get_list",
        data: {
          id: that.id,
          page: mescroll.num,
        },
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          if (mescroll.num == 1) {
            that.content = result.data.data.data;

            if (result.data.data.data.length == 0) {
              mescroll.endErr();
              return;
            }
          } else {
            that.content = that.content.concat(result.data.data.data);
          }
          mescroll.endSuccess(
            result.data.data.data.length,
            result.data.data.data.length >= mescroll.size
          );
          uni.setStorageSync("chatlist", that.content);
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    // cardSwiper
    cardSwiper(e) {
      this.cardCur = e.detail.current;
    },
    // 跳转
    tn(e) {
      uni.navigateTo({
        url: e,
      });
    },

    setPermissions() {
      // #ifdef APP-PLUS
      if (plus.os.name == "Android") {
        // 判断是Android
        var main = plus.android.runtimeMainActivity();
        var pkName = main.getPackageName();
        var uid = main.getApplicationInfo().plusGetAttribute("uid");
        var NotificationManagerCompat = plus.android.importClass(
          "android.support.v4.app.NotificationManagerCompat"
        );
        //android.support.v4升级为androidx
        if (NotificationManagerCompat == null) {
          NotificationManagerCompat = plus.android.importClass(
            "androidx.core.app.NotificationManagerCompat"
          );
        }
        var areNotificationsEnabled =
          NotificationManagerCompat.from(main).areNotificationsEnabled();
        // 未开通‘允许通知’权限，则弹窗提醒开通，并点击确认后，跳转到系统设置页面进行设置
        if (!areNotificationsEnabled) {
          uni.showModal({
            title: "通知权限开启提醒",
            content: "您还没有开启通知权限，无法接受到消息通知，请前往设置！",
            showCancel: false,
            confirmText: "去设置",
            success: function (res) {
              if (res.confirm) {
                var Intent = plus.android.importClass("android.content.Intent");
                var Build = plus.android.importClass("android.os.Build");
                //android 8.0引导
                if (Build.VERSION.SDK_INT >= 26) {
                  var intent = new Intent(
                    "android.settings.APP_NOTIFICATION_SETTINGS"
                  );
                  intent.putExtra("android.provider.extra.APP_PACKAGE", pkName);
                } else if (Build.VERSION.SDK_INT >= 21) {
                  //android 5.0-7.0
                  var intent = new Intent(
                    "android.settings.APP_NOTIFICATION_SETTINGS"
                  );
                  intent.putExtra("app_package", pkName);
                  intent.putExtra("app_uid", uid);
                } else {
                  //(<21)其他--跳转到该应用管理的详情页
                  intent.setAction(
                    Settings.ACTION_APPLICATION_DETAILS_SETTINGS
                  );
                  var uri = Uri.fromParts(
                    "package",
                    mainActivity.getPackageName(),
                    null
                  );
                  intent.setData(uri);
                }
                // 跳转到该应用的系统通知设置页
                main.startActivity(intent);
              }
            },
          });
        }
      } else if (plus.os.name == "iOS") {
        // 判断是ISO
        var isOn = undefined;
        var types = 0;
        var app = plus.ios.invoke("UIApplication", "sharedApplication");
        var settings = plus.ios.invoke(app, "currentUserNotificationSettings");
        if (settings) {
          types = settings.plusGetAttribute("types");
          plus.ios.deleteObject(settings);
        } else {
          types = plus.ios.invoke(app, "enabledRemoteNotificationTypes");
        }
        plus.ios.deleteObject(app);
        isOn = 0 != types;
        if (isOn == false) {
          uni.showModal({
            title: "通知权限开启提醒",
            content: "您还没有开启通知权限，无法接受到消息通知，请前往设置！",
            showCancel: false,
            confirmText: "去设置",
            success: function (res) {
              if (res.confirm) {
                var app = plus.ios.invoke("UIApplication", "sharedApplication");
                var setting = plus.ios.invoke(
                  "NSURL",
                  "URLWithString:",
                  "app-settings:"
                );
                plus.ios.invoke(app, "openURL:", setting);
                plus.ios.deleteObject(setting);
                plus.ios.deleteObject(app);
              }
            },
          });
        }
      }
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
.template-hot {
}

.search-content {
  color: #ffffff;
  font-size: 36rpx;
}

.tn-margin-sm {
  margin: 40rpx;

  .justify-content-item {
    color: #fff;
  }
}

.top-cards {
  display: flex;
  justify-content: space-between;
  width: 100%;
  // padding-bottom: 40rpx;
  // padding-top: 28rpx;
  padding: 28rpx 40rpx 0rpx 40rpx;
}

.card-item {
  width: 140rpx;
  height: 140rpx;
  margin: 0px;
  padding: 0px;
  border-radius: 20rpx;

  .tn-text-ellipsis {
    color: #fff;
  }
}

.all-text {
  color: #d8d8d8;
}

.hold-message-item {
  display: flex;
  flex-direction: column;
  margin-right: 20rpx;
  width: 100rpx;

  .tn-text-ellipsis {
    display: block;
    width: 100rpx;
    color: #fff;
    font-size: 24rpx;
  }

  .hold-message-item-top {
    width: 100rpx;
  }
}

.hold-message-item-1 {
  margin-left: 20px;
}

.hold-message-item-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100rpx;
  height: 100rpx;
  box-sizing: border-box;
  /* 渐变3 */
  background-image: url("../../../static/images/holdMessageIcon2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 28rpx;
  position: relative;

  .hold-message-image {
    width: 60rpx;
    height: 60rpx;
  }
}

.hold-message-text {
  position: absolute;
  font-size: 24rpx;
  background: linear-gradient(270deg, #ff6cce 0%, #f9a1ba 100%);
  width: 92rpx;
  height: 30rpx;
  left: 4rpx;
  bottom: -3rpx;
  z-index: 15;
  color: #fff;
  text-align: center;
  border-radius: 329px;

  text {
    font-size: 24rpx;
  }
}

.hold-message-avatar {
  width: 86rpx;
  height: 86rpx;
  border-radius: 50%;
}

.card-item-image {
  width: 62rpx;
  height: 58.9rpx;
  margin-top: 24rpx;
  margin-bottom: 13rpx;
}

.card-item-1 {
  background: linear-gradient(270deg, #189eff 0%, #06ffaa 100%);
}

.card-item-2 {
  background: linear-gradient(270deg, #ff6cce 0%, #f9a1ba 100%);
}

.card-item-3 {
  background: linear-gradient(90deg, #7f50fe 0%, #ffaef8 67%, #d5b7f8 100%);
}

.card-item-4 {
  background: linear-gradient(
    180deg,
    rgba(65, 133, 255, 0.8) 0%,
    rgba(85, 223, 252, 0.8) 100%
  );
}

.icon12 {
  &__item {
    width: 30%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 80rpx;
      height: 80rpx;
      font-size: 60rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
      }
    }
  }
}

/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #ffffff;
  }
}

.message {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;

  &__left {
    width: 13%;
  }

  &__middle {
    width: 75%;
    padding-left: 20rpx;
    padding-right: 40rpx;
  }

  &__right {
    width: 12%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  &__name {
    font-size: 32rpx;
    margin-bottom: 8rpx;
  }

  &__content {
    font-size: 26rpx;
    color: #838383;
  }

  &__tips {
    &__icon {
      font-size: 36rpx;
      color: #aaaaaa;
    }
  }
}

.tn-scroll-list {
  padding-bottom: 0px;
}

//官方小助手
.message-gf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100vw - 40px);
  height: 120rpx;
  padding: 8rpx 20rpx;
  background: rgba(0, 0, 0, 0.3);
  margin: 0 auto;
  margin-bottom: 16rpx;
  border-radius: 10rpx;
}

.message-gf-left {
  position: relative;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: linear-gradient(270deg, #a7f6f9 0%, #6a6dff 100%);
}
.message-gf-left-flot-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  right: 0rpx;
  width: 28rpx;
  height: 28rpx;
  background: linear-gradient(270deg, #ff6cce 0%, #f9a1ba 100%);
  border-radius: 50%;
}
.message-gf-left-flot-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  right: 0rpx;
  width: 28rpx;
  height: 28rpx;
  background: linear-gradient(270deg, #189eff 0%, #06ffaa 100%);
  border-radius: 50%;
}
.message-gf-left-flot-img {
  width: 16rpx;
  height: 24rpx;
}
.message-gf-center {
  display: flex;
  flex-direction: column;
  width: 360rpx;
  margin-left: 28rpx;
  margin-right: auto;
}

.message-gf-center-1 {
  display: flex;
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin-top: 12rpx;
}

.message-gf-center-text-2 {
  width: 68rpx;
  height: 32rpx;
  border-radius: 309px;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #52ecfd;
  margin-left: 20rpx;
  margin-top: 4rpx;
  text {
    font-size: 10px;
  }
}

.message-gf-center-text-3 {
  font-family: Source Han Sans;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 10rpx;
}

.message-gf-center-text {
  font-size: 14px;
}

.message-gf-right {
  display: flex;
  flex-direction: column;
}

.message-gf-right-1 {
  display: block;
  font-size: 10px;
  color: #fff;
  margin-top: 6rpx;
  margin-bottom: 22rpx;
}

.message-gf-right-2 {
  display: flex;
  justify-content: center;
}
.message-lists {
  margin-top: 16px;
}
.message-gf-center-text-2-nv {
  background: linear-gradient(270deg, #ff6cce 0%, #f9a1ba 100%);
  font-weight: bold;
}
.message-gf-center-text-2-nan {
  background: linear-gradient(270deg, #189eff 0%, #06ffaa 100%);
  font-weight: bold;
}
.btm-solid {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 44rpx 0 130rpx 0;
  align-items: center;
}
.btm-solid-1 {
  width: 45px;
  display: flex;
  border-top: 1px solid #d8d8d8;
}
.btm-solid-2 {
  font-size: 10px;
  color: #ffffff;
  margin: 0 20rpx;
}
.btm-solid-3 {
  width: 45px;
  display: flex;
  border-top: 1px solid #d8d8d8;
}
.tn-scroll-list__indicator {
  margin-top: 18px;
}
</style>